<template>
  <div class="expression-box-out" @mousedown.stop>
    <div class="expression-box-in">
      <div class="expression-item"
           @click="$emit('click',item)"
           :title="item.label"
           :key="index"
           v-for="(item,index) in expression">
        <img :src="item.src">
      </div>
    </div>
  </div>
</template>

<script>
  const expression = require('../data/expression')
  export default {
    name: 'ExpressionBox',
    data () {
      return {
        expression
      }
    }
  }
</script>

<style scoped lang="scss">

  $expression_count: 13;
  $expression_size: 36px;
  $space_size: 10px;

  .expression-box-out {
    height: 225px;
    width: calc(#{$expression_size} * #{$expression_count});

    .expression-box-in {
      width: 100%;
      height: 100%;
      overflow: auto;
      font-size: 0;
      &::-webkit-scrollbar-thumb {
        background: #ddd !important;
        border-radius: 4px !important;
        /*display: none;*/
      }

      &::-webkit-scrollbar {
        width: 6px !important;
        height: 10px !important;
        border-radius: 3px !important;
      }
      .expression-item {
        display: inline-block;
        width: $expression_size;
        height: $expression_size;
        font-size: 14px;
        padding: calc(#{$space_size} / 2);
        box-sizing: border-box;
        overflow: hidden;

        /*position: relative;*/

        img {
          /*position: absolute;*/
          /*top: 50%;*/
          /*left: 50%;*/
          /*<!--transform: translate(-50%, -50%);-->*/
          max-width: 100%;
          max-height: 100%;
        }

        &:hover {
          background-color: #cccccc;
        }
      }
    }
  }
</style>
